<template>
  <div class="app-container foundation">
    <div class="title">
      <h3>资产设备管理</h3>
      <span>用于管理小区里的公共设备，比如电梯，路灯，垃圾桶，配电箱等</span>
    </div>
    <el-card>
      <search ref="refSearch" />
    </el-card>
    <div style="padding: 10px 0">
      <el-card v-loading="loading">
        <el-row type="flex" justify="end" align="middle" style="padding: 10px">
          <el-button
            :disabled="!checkBtnPermission('/device/index', 'create')"
            type="primary"
            size="small"
            @click="drawerTrue('add','',checkBtnPermission('/device/index', 'create'))"
          >新增资产设备</el-button>
          <i class="el-icon-refresh-right icon" @click="getComponents" />
          <i class="el-icon-upload2 icon" />
          <i class="el-icon-setting icon" />
        </el-row>
        <!-- 表单 -->
        <el-table :data="list" stripe style="width: 100%">
          <el-table-column prop="community.name" label="小区名称" />
          <el-table-column prop="code" label="设备编号" width="250px" />
          <el-table-column prop="name" label="设备名称" />
          <el-table-column
            prop="photo"
            label="设备图片"
            width="150px"
            style="padding: 10px 0"
          >
            <template slot-scope="{ row }">
              <div class="iamge">
                <img
                  :src="getPhoto(row.photo)[0]"
                  style=""
                  @click="previewImg(getPhoto(row.photo))"
                >
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="brand" label="设备品牌" />
          <el-table-column prop="price" label="价格" />
          <el-table-column prop="quantity" label="数量" />
          <el-table-column prop="buy_time" label="购买日期">
            <template slot-scope="{ row }">
              {{ row.buy_time | formatDate }}
            </template>
          </el-table-column>
          <el-table-column prop="durable_years" label="预计使用年限" />
          <el-table-column header-align="center" align="center" label="操作">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                :disabled="!checkBtnPermission('/device/index', 'update')"
                @click="drawerTrue('edit',row.id,checkBtnPermission('/device/index', 'update'))"
              >编辑</el-button>
              <el-button type="text" :disabled="!checkBtnPermission('/device/index', 'destroy')" @click="delBmit(row.id,checkBtnPermission('/device/index', 'destroy'))">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <br>
        <!-- 分页 -->
        <el-row type="flex" justify="end">
          <el-pagination
            :page-sizes="[5,10, 15, 20, 30]"
            :current-page="formData.current"
            :page-size="formData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </el-row>
      </el-card>
    </div>
    <!-- 抽屉 -->
    <!-- <el-drawer title="我是标题" :visible.sync="drawer" show-close size="50%" class="drawer"> -->
    <add-from ref="refAdd" class="refAdd" />
    <!-- </el-drawer> -->
  </div>
</template>

<script>
import {
  getCommunity,
  getComponents,
  delComponents,
  editComponents
} from '@/api/device/device'
import search from '@/views/device/components/index/search.vue'
import AddFrom from './components/index/addFrom.vue'
import { URL } from '@/utils/rootURL'
// import mixins from '@/mixins'
export default {
  name: 'VueAdminTemplateMasterIndex',
  components: {
    search,
    AddFrom
  },
  data() {
    return {
      // 获取表单
      formData: {
        current: 1,
        pageSize: 5,
        buy_time: '',
        community_code: '',
        name: ''
      },
      // 组件下拉数据
      componentsData: [],
      // 加载
      loading: false,
      // 表单数据
      list: [],
      // 总数量
      count: 0,
      imges: require('@/assets/images/bgImg.db418f95.jpg')
    }
  },
  created() {
    this.getComponents()
  },
  mounted() {
    this.getCommunity()
  },

  methods: {
    // 打开抽屉
    drawerTrue(type, id, btnList) {
      if (!btnList) return
      this.$refs.refAdd.drawer = true
      this.$nextTick(async() => {
        // 获取详情
        if (type === 'edit') {
          // 此处存在pug增加也默认获取到了值
          // 所有要判断得到的数据是否是id
          const res = await editComponents(id)
          this.$refs.refAdd.formData = res.data.data
        }
        this.$refs.refAdd.list = this.componentsData
      })
      // this.$refs.refAdd.list = this.drawerTrue
    },
    // 表单重置
    resetting() {
      this.formData = {
        current: 1,
        pageSize: 5
      }
      this.getComponents()
    },
    // 图片预览
    previewImg(url) {
      // 单图预览
      if (url.length === 1) {
        this.$hevueImgPreview({
          url: url[0]
        })
      } else {
        // # 多图预览
        this.$hevueImgPreview({
          multiple: true, // 开启多图预览模式
          nowImgIndex: 0, // 多图预览，默认展示第二张图片
          imgList: url // 需要预览的多图数组
        })
      }
    },
    // 图片格式化
    getPhoto(val) {
      const imgAll = []
      if (val) {
        // 多图
        if (val.includes(',')) {
          return val.split(',').map((item) => URL + item)
        } else {
          // 单图
          imgAll.push(URL + val)
          return imgAll
        }
      } else {
        // 无图
        imgAll.push(this.imges)
        return imgAll
      }
    },
    // 获取下拉框数据
    async getCommunity() {
      const res = await getCommunity()
      this.componentsData = res.data.data
      this.$refs.refSearch.list = this.componentsData
      // this.$refs.refAdd.list = res
    },
    // 获取表单数据
    async getComponents() {
      console.log(this.checkBtnPermission('/device/index', 'create'), 'rot')
      this.loading = true
      const res = await getComponents({ ...this.formData })
      console.log(res.data.data)
      this.count = res.data.data.count
      this.list = res.data.data.rows
      this.loading = false
    },
    // 点击切换页数
    handleCurrentChange(val) {
      this.formData.current = val
      this.getComponents()
    },
    // 点击切换数量
    handleSizeChange(val) {
      this.formData.pageSize = val
      this.getComponents()
    },
    // 删除
    async delBmit(id, btnList) {
      if (!btnList) return
      await this.$confirm('是否删除数据', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await delComponents(id)
      this.$message('删除成功')
      if (this.formData.current > 1 && this.list.length === 1) {
        this.formData.current--
      }
      this.getComponents()
    }
  }
}
</script>

<style lang="scss" scoped>
body {
  overflow: auto;
}
.foundation {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  .iamge {
    text-align: center;
    height: 100px;
  }
  .icon {
    cursor: pointer;
    font-size: 24px;
    margin: 0 10px;
  }
}
// .title {
//   display: flex;
//   align-items: center;
//   h3 {
//     font-size: 20px;
//     color: rgba(0, 0, 0, 0.88);
//     padding-right: 10px;
//   }
// }
// ::v-deep.drawer {
//   .el-drawer__header {
//     padding-bottom: 10px;
//     margin: 0;
//     font-size: 25px;
//     border-bottom: 1px solid #f0f0f0;
//   }
//   // .el-drawer__title {
//   //   padding-top: 58px;
//   // }
//   .el-drawer__body {
//     flex: 1 1;
//     min-width: 0;
//     min-height: 0;
//     /* overflow: auto; */
//   }
// }
img {
  width: auto;
  height: 100px;
}
</style>
